<template>
	<view v-for="(item, index) in list" :key="item.id" class="item-container" @click="toDetail(item.id)">
		<view class="image-wrapper">
			<van-image width="220rpx" height="220rpx" radius="10rpx" :src="item.image_text" lazy-load
				@error="handleImageError(item, index)" />
		</view>
		<view class="content-wrapper">
			<view class="title">{{item.title}}</view>
			<view class="description">{{item.description}}</view>
			<view class="action">了解详情 <van-icon name="arrow" color="#a7a7a7" /></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ppl-list",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				errorImages: []
			};
		},
		mounted() {
			// 如果需要初始化操作，可以在这里进行
		},
		methods: {
			toDetail(id) {
				// 触发事件并传递ID到父组件
				this.$emit('toDetail', id);
			},
			handleImageError(item, index) {
				// 处理图片加载失败的情况
				console.error(`图片加载失败: ${item.image_text}`);
				this.errorImages.push(index);
			}
		}
	}
</script>

<style scoped>
	.item-container {
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 12rpx;
		display: flex;
		align-items: center;
	}

	.image-wrapper {
		flex-shrink: 0;
	}

	.content-wrapper {
		flex: 1;
		padding-left: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.title {
		color: #333;
		font-weight: bold;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.description {
		color: #666;
		font-size: 24rpx;
	}

	.action {
		color: #999;
		font-size: 24rpx;
		align-self: flex-end;
	}
</style>